<template>
  <div class="app-container">
    <!-- 标题与操作区 -->
    <div class="page-header">
      <h2 class="page-title">积分等级管理</h2>
      <router-link :to="'/core/integral-grade/create'">
        <el-button type="primary" icon="el-icon-plus">
          新增等级
        </el-button>
      </router-link>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
        :data="list"
        border
        stripe
        :row-class-name="tableRowClassName"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" width="60" label="序号"/>
        <el-table-column prop="borrowAmount" label="借款额度" align="center"/>
        <el-table-column prop="integralStart" label="积分区间开始" align="center"/>
        <el-table-column prop="integralEnd" label="积分区间结束" align="center"/>
        <el-table-column
          label="操作"
          width="220"
          align="center"
        >
          <template slot-scope="scope">
            <router-link :to="'/core/integral-grade/edit/' + scope.row.id">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                class="btn-edit"
              >
                修改
              </el-button>
            </router-link>

            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeById(scope.row.id)"
              class="btn-delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 空状态提示 -->
      <div v-if="list.length === 0" class="empty-state">
        <el-empty description="暂无积分等级数据，请点击新增按钮添加"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import integralGradeApi from '@/api/core/integral-grade'

export default {
  data() {
    return {
      list: [] // 数据列表
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      integralGradeApi.list().then(response => {
        this.list = response.data.list
      })
    },
    removeById(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          integralGradeApi.removeById(id).then(response => {
            this.$message.success(response.message)
            this.fetchData()
          })
        })
        .catch(() => {
          this.$message.info('取消删除')
        })
    },
    // 表格行样式
    tableRowClassName({row, rowIndex}) {
      return rowIndex % 2 === 0 ? 'row-even' : 'row-odd';
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

// 标题与操作区样式
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeef3;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2d3d;
    margin: 0;
  }
}

// 表格容器样式
.table-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 15px;
}

// 表格行样式美化
::v-deep .el-table {
  border-radius: 4px;
  overflow: hidden;
}

::v-deep .el-table th {
  background-color: #f7f8fa;
  font-weight: 500;
  color: #4e5969;
}

// 奇偶行样式区分
.row-even {
  background-color: #fff;
}

.row-odd {
  background-color: #fcfdfe;
}

// 操作按钮样式
.btn-edit {
  margin-right: 8px;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(64, 158, 255, 0.3);
  }
}

.btn-delete {
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(245, 108, 108, 0.3);
  }
}

// 空状态样式
.empty-state {
  padding: 40px 0;
  text-align: center;
}

// 加载动画优化
::v-deep .el-table-loading {
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
